<template>
  <div class="app-container">

    <search-bar :form="queryParams" @sub="getList"></search-bar>

    <vxe-table ref="table" :data="tableData.list">
      <vxe-table-column width="120" field="number" title="图片" align="center">
        <template #default="scope">
          <vxe-tooltip v-if="scope.row.imgUrl"
                      class="box-item"
                      effect="dark"
                      placement="right-start"
          >
            <template #content>
              <img alt="" :src="showImg(scope.row.imgUrl)" width="100" height="100" />
            </template>
            <img alt="" :src="showImg(scope.row.imgUrl)" width="30" height="30" />
          </vxe-tooltip>
          <span v-else>没有图片</span>
        </template>
      </vxe-table-column>

      <vxe-table-column field="state" title="状态" width="80" align="center">
        <template #default="scope">
          <dict-tag :options="normal_cannot_status" :value="scope.row.state" />
        </template>
      </vxe-table-column>

      <vxe-table-column field="name" title="名称" align="center"/>
      <vxe-table-column field="categoryName" title="分类" align="center" width="120"/>
      <vxe-table-column field="brand" title="品牌" align="center" width="120"/>
      <vxe-table-column field="model" title="规格型号" align="center" width="120"/>
      <vxe-table-column field="price" title="单价" align="center" width="120"/>
      <vxe-table-column field="unit" title="计量单位" align="center" width="120"/>

      <vxe-table-column title="操作" fixed="right" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleUpdate(scope.row)">修改</el-button>

          <el-button v-if="scope.row.state == 1" size="small" type="primary" @click="handleEnable(scope.row)">启用</el-button>

          <el-button v-if="scope.row.state != 1" size="small" type="primary" @click="handleDisable(scope.row)">禁用</el-button>

          <el-button size="small" type="primary" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </vxe-table-column>
    </vxe-table>

    <div class="pagination-container">
      <pagination
        v-show="tableData.paging.total>0"
        :total="tableData.paging.total"
        v-model:page="tableData.paging.pageNum"
        v-model:limit="tableData.paging.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 编辑窗口 -->
    <edit ref="editDialog" @sub="getList"></edit>
    <edit ref="editDialog" @sub="getList"></edit>
  </div>
</template>
<script setup>

import { listAssetItem, delAssetItem, exportAssetItem } from "./api.js";
import Edit from './edit'
import SearchBar from "./SearchBar.vue";

const { proxy } = getCurrentInstance();
const { normal_cannot_status } = proxy.useDict("normal_cannot_status");

const editDialog = ref();

// 遮罩层
const loading = ref(false);

const table = ref();
const tableData = reactive({
  loading: false,
  list: [], // 表格列表数据
  paging: {
    total: 0, // 总条数
    pageNum: 1,
    pageSize: 10,
  }
});

const initQueryParams = {
  state: null,
  field: 'number',
  value: null,
  pageNum: 1,
  pageSize: 10,
  number: null,
  name: null,
  categoryId: null,
  rfid: null,
  brand: null,
  model: null,
  buyWay: null,
  buyTime: null,
  buyPrice: null,
  adminId: null
}

const queryParams = reactive({...initQueryParams})

/** 查询资产清单表列表 */
async function getList() {

  loading.value = true;
  const {pageNum, pageSize} = tableData.paging;
  const query = {...queryParams};
  const pageReq = {page: pageNum - 1, size: pageSize};
  listAssetItem(query, pageReq).then(response => {
    const { content, totalElements } = response
    tableData.list = content;
    tableData.paging.total = totalElements;
    tableData.loading = false;
  }).catch(error => {
    tableData.loading = false;
    console.log(error);
  });
}

// 表单重置
function reset() {
  Object.assign(queryParams, initQueryParams)
}

/** 搜索按钮操作 */
function handleQuery() {
  tableData.paging.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  reset();
  handleQuery();
}

function showImg(img) {
  return import.meta.env.VITE_APP_BASE_API + img;
}

/** 新增按钮操作 */
function handleAdd() {
  editDialog.value.open();
}

/** 修改按钮操作 */
function handleUpdate(row) {
  editDialog.value.open(row);
}

function handleEnable(row) {
  editDialog.value.open(row);
}

/** 删除按钮操作 */
function handleDelete(row) {
  const ids = row.id || this.ids;
  proxy.$modal.confirm('是否确认删除资产清单表编号为"' + ids + '"的数据项？').then(function() {
    return delAssetItem(ids);
  }).then(() => {
    this.getList();
    this.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  const queryParams = this.queryParams;
  this.$modal.confirm('是否确认导出所有资产清单表数据项？').then(() => {
    this.exportLoading = true;
    return exportAssetItem(queryParams);
  }).then(response => {
    this.$download.download(response);
    this.exportLoading = false;
  }).catch(() => {});
}

// 页面打开后获取列表数据
onMounted( async () => {

  await getList();
  // await getTreeData();

});

</script>

<style scoped>


.vxe-table {
  flex: 1;  
  overflow: auto; 
}

</style>